import { initMixin } from "./init"; //里面有_init方法 初始化 mixins混入created data等实现  data 响应式 this指向 对templte模板初始化的操作
import { lifecycleMixin } from "./lifecycle";
import { renderMixin } from "./vnode/index";
import { initGlobApi } from "./global-api/index.js";
import { stateMixin } from "./initState";

import { compileToFunction } from "./compile/index";
import { createEl, patch } from "./vnode/patch.js";

// Vue构造函数
function Vue(options) {
  // options用户的选项
  // console.log('Vue--开始入口--options')
  // 调用数据初始化方法--内部也调用了对templte模板初始化的操作
  this._init(options);
}
// 例子 以后都可以这样增加模块功能 但是不好维护 所以进行 拆分js模块化开发----把下面的代码抽出文件
// Vue.prototype._init = function (options) {
//     console.log('vue初始化操作+配置项选择',options)
//     let data = typeof options.data == "function" ? options.data.call(this): options.data; // call()、apply()、bind() 都是用来重定义 this 这个对象的！ call(this,1,2) apply(this,[1,2]) bind(this,[1,2])()
//     console.log(data,"dagta")
// }

// 0 - 声明数据初始化方法，以及template转ast语法树在转render字符串在转render函数 以及合并生命周期函数到{created: [f1,f2]} 的方法等
initMixin(Vue);
// 1.调用lifecycleMixin传入Vue---方法内部-- 声明生命周期方法--定义方法_update等。。。。
lifecycleMixin(Vue);

// 2.调用 renderMixin方法--内部声明定义方法==>_render方法等。。。
renderMixin(Vue);

// 给vm上添加 $nextTick方法  $watch等全局方法
stateMixin(Vue);

// 3.调用initGlobApi--内部声明定义-- vue全局方法
initGlobApi(Vue);

export default Vue;

// diff.html------------------------------------------diff.html---------
// 手动创建一个vnode虚拟dom
let vm1 = new Vue({
  // el: 'a',
  data() {
    return {
      name1: "虚拟dom1",
    };
  },
});
// let render1 = compileToFunction("<div id='a' style='color: green' zz='年后'>我是老的dom有儿子的:{{name1}}</div>") // 老的有儿子 新的没有儿子
// let render1 = compileToFunction("<div id='a' style='color: green' zz='年后'></div>") // 老的没有儿子，新的有儿子
// let render1 = compileToFunction(`<ul>
//     <li key="a" style="color: #f00">a</li>
//     <li key="b">b</li>
//     <li key="c">c</li>
// </ul>`) // 老的有儿子 新的有儿子----新前旧前---新节点比旧节点多

// let render1 = compileToFunction(`<ul>
//     <li key="a" style="color: #f00">a</li>
//     <li key="b">b</li>
//     <li key="c">c</li>
// </ul>`) // 老的有儿子 新的有儿子----新后旧后---新节点比旧节点多

// let render1 = compileToFunction(`<ul>
// <li key="f">f</li>
// <li key="e">e</li>
//     <li key="d">d</li>
//     <li key="a" style="color: #f00">a</li>
//     <li key="b">b</li>
//     <li key="c">c</li>
// </ul>`); // 老的有儿子 新的有儿子----新后旧后---旧节点比新节点多多多多

// 交叉比对 =================================================================》
// let render1 = compileToFunction(`<ul>
//     <li key="a" style="color: #f00">a</li>
//     <li key="b">b</li>
//     <li key="c">c</li>
// </ul>`) // 老的有儿子 新的有儿子----新前旧后--新节点比旧节点多多多多多

// let render1 = compileToFunction(`<ul>
//     <li key="d">d</li>
//     <li key="e">e</li>
//     <li key="a" style="color: #f00">a</li>
//     <li key="b">b</li>
//     <li key="c">c</li>
// </ul>`) // 老的有儿子 新的有儿子----新前旧后--新节点比旧节点少少少少

// let render1 = compileToFunction(`<ul>
// <li key="a" style="color: #f00">a</li>
// <li key="b">b</li>
// <li key="c">c</li>
// </ul>`); // 老的有儿子 新的有儿子----新后旧前---新节点比旧节点多多多

// ====================交叉比对

let render1 = compileToFunction(`<ul>   
<li key="a" style="color: #f00">a</li>
<li key="b" style="color: red">b</li>
<li key="f" >f</li>
<li key="c">c</li>
</ul>`); // 老的有儿子 新的有儿子----暴力比对
let vnode1 = render1.call(vm1); // 调用Vue.prototype._v/_c等方法 ==> render函数转vnode  vm._update(vnode) ==> 把虚拟dom转成真实dom
let newDom1 = createEl(vnode1);
console.log(
  Vue,
  vm1,
  render1,
  vnode1,
  newDom1,
  "diff--Vue,vm1,render1,vnode1,newDom1",
);
document.body.appendChild(newDom1); //原生dom测试：在页面中显示-第一次添加到页面中
// 数据更新

let vm2 = new Vue({
  // el: 'a2',
  data() {
    return {
      xingming: "虚拟dom2",
    };
  },
});
// let render2 = compileToFunction("<p id='a2'>{{xingming}}<span>你好</span></p>"); //元素不一样
// let render2 = compileToFunction("<div id='a2' style='color: red' class='class1 class2' customerAttr='zz'></div>"); //老的有儿子，新的没有有儿子
// let render2 = compileToFunction("<div id='b' style='color: red;background: #f6f6f6' class='class1 class2' customerAttr='zz'>你好{{xingming}}</div>"); //老的没有儿子，新的有儿子
// let render2 = compileToFunction(`<ul>
// <li key="a" style="color: #ff0;background: #f00">a</li>
// <li key="b">b</li>
// <li key="c">c</li>
// <li key="d">d</li>
// </ul>`); // 老的有儿子新的有儿子-------新前旧前--新节点比旧节点多

// let render2 = compileToFunction(`<ul>
// <li key="d">d</li>
// <li key="a" style="color: #ff0;background: #f00">a</li>
// <li key="b">b</li>
// <li key="c">c</li>
// </ul>`); // 老的有儿子新的有儿子-------新后旧后--新节点比旧节点多

// let render2 = compileToFunction(`<ul>
// <li key="a" style="color: #ff0;background: #f00">a</li>
// <li key="b">b</li>
// <li key="c">c</li>
// </ul>`); // 老的有儿子新的有儿子-------新后旧后--旧节点比新节点多多多多哦哦

// 交叉比对 =================================================================》
// let render2 = compileToFunction(`<ul>
// <li key="c">c</li>
// <li key="b">b</li>
// <li key="a" style="color: #ff0;background: #f00">a</li>
// <li key="d">d</li>
// </ul>`); // 老的有儿子新的有儿子-------新前旧后---新节点比旧节点多多多多多多多

// let render2 = compileToFunction(`<ul>
// <li key="a" style="color: #ff0;background: #f00">a</li>
// <li key="b">b</li>
// <li key="c">c</li>
// </ul>`); // 老的有儿子新的有儿子-------新前旧后---新节点比旧节点少少少少

// let render2 = compileToFunction(`<ul>
// <li key="f">f</li>
// <li key="e">e</li>
// <li key="d">d</li>
// <li key="c">c</li>
// <li key="b">b</li>
// <li key="a" style="color: #ff0;background: #f00">a</li>
// </ul>`); // 老的有儿子新的有儿子-------新后旧前---新节点比旧节点多多多
// ===============交叉对比========end

let render2 = compileToFunction(`<ul>
<li key="g" style="color: #ff0;background: #f00">gggg</li>
<li key="e" style="color: #0f0">eeee</li>
<li key="f" >f</li>
<li key="d" style="color: #e0f">dddd</li>
<li key="m" style="color: #000">mmmm</li>
</ul>`); // 老的有儿子新的有儿子-------暴力比对
let vnode2 = render2.call(vm2); // 调用Vue.prototype._v/_c等方法 ==> render函数转vnode  vm._update(vnode) ==> 把虚拟dom转成真实dom
console.log(Vue, vm2, render2, vnode2, "diff--Vue,vm2,render2,vnode2");
// path 比对
setTimeout(() => {
  // 给个定时器好观察变化
  patch(vnode1, vnode2);
}, 4000);
// console.log(el,'diff--path-return-的值')
